<template>
	<view class="container-wx">
		<view class="content">
			<!-- 切换按钮 -->
			<view class="switch-tabs">
				<view class="tab-item" :class="{ active: currentTab === 'library' }" @click="switchTab('library')">
					图书馆
				</view>
				<view class="tab-item" :class="{ active: currentTab === 'cultural' }" @click="switchTab('cultural')">
					文创馆
				</view>
			</view>

			<!-- 搜索框 -->
			<view style="margin-top: 3%;">
				<u-search :placeholder="keywordName" v-model="keyword" @custom="handleSearch"></u-search>
			</view>

			<!-- 公共内容区域 -->
			<view style="margin-top: 3%;">
				<u-swiper :list="list3" indicator indicatorModse="line" circular></u-swiper>
			</view>

			<view style="margin-top: 3%">
				<u-notice-bar :text="text1" mode="link" speed="50" url="pages/mine/index"></u-notice-bar>
			</view>

			<view class="module">
				<view class="module-item" @click="handleCuratorRecommended()">
					<image style="width: 50px; height: 50px"
						src="https://www.taotaohomecraft.press/prod-api/profile/first.png">
					</image>
					<view style="font-size: 12px">馆长推荐</view>
				</view>
				<view class="module-item" style="margin-left: 5%" @click="handelChangeBookList('133')">
					<image style="width: 50px; height: 50px"
						src="https://www.taotaohomecraft.press/prod-api/profile/second.png">
					</image>
					<view style="font-size: 12px">绘本故事</view>
				</view>
				<view class="module-item" style="margin-left: 5%" @click="handelChangeBookList('128,203')">
					<image style="width: 50px; height: 50px"
						src="https://www.taotaohomecraft.press/prod-api/profile/third.png"></image>
					<view style="font-size: 12px">儿童文学</view>
				</view>
				<view class="module-item" style="margin-left: 5%" @click="handelChangeBookList('118,191,240')">
					<image style="width: 50px; height: 50px"
						src="https://www.taotaohomecraft.press/prod-api/profile/forth.png"></image>
					<view style="font-size: 12px">历史漫画</view>
				</view>
				<view class="module-item" style="margin-left: 5%" @click="handelChangeBookList('112,132,210,223,227')">
					<image style="width: 50px; height: 50px"
						src="https://www.taotaohomecraft.press/prod-api/profile/fivth.png"></image>
					<view style="font-size: 12px">学科辅导</view>
				</view>
			</view>

			<!-- 根据当前tab显示不同内容 -->
			<library-content v-if="currentTab === 'library'" :keyword="keyword"></library-content>
			<cultural-content v-else :keyword="keyword"></cultural-content>
		</view>
	</view>
</template>

<script>
	import LibraryContent from '@/components/library/index.vue';
	import CulturalContent from '@/components/cultural/index.vue';
	import {
		slideshowList
	} from '@/api/book';
	import config from '@/config';
	import constant from '@/utils/constant';

	export default {
		components: {
			LibraryContent,
			CulturalContent
		},
		data() {
			return {
				currentTab: 'library', // 默认选中图书馆
				keyword: '',
				keywordName: '请输入图书名称',
				list3: [],
				text1: '淘淘家图书馆开业啦！线上借阅，配送到家！联系方式：18697355127'
			};
		},
		onLoad() {
			this.constant = constant.type;
			// 根据全局类型设置初始状态
			if (this.constant == '1') {
				this.currentTab = 'cultural';
				this.keywordName = '请输入文创商品名称';
				this.text1 = '淘淘家文创馆开业啦！精美文创，配送到家！联系方式：18697355127';
			} else {
				this.currentTab = 'library';
				this.keywordName = '请输入图书名称';
				this.text1 = '淘淘家图书馆开业啦！线上借阅，配送到家！联系方式：18697355127';
			}
			this.getSlideshowList();
		},
		onPullDownRefresh() {
			this.getSlideshowList().finally(() => {
				uni.stopPullDownRefresh();
			});
		},
		methods: {
			switchTab(tab) {
				if (this.currentTab === tab) return;

				this.currentTab = tab;
				this.keyword = '';

				if (tab === 'library') {
					constant.type = '2';
					this.keywordName = '请输入图书名称';
					this.text1 = '淘淘家图书馆开业啦！线上借阅，配送到家！联系方式：18697355127';
				} else {
					constant.type = '1';
					this.keywordName = '请输入文创商品名称';
					this.text1 = '淘淘家文创馆开业啦！精美文创，配送到家！联系方式：18697355127';
				}

				// 切换时重新获取轮播图
				this.getSlideshowList();
			},

			async getSlideshowList() {
				const type = this.currentTab === 'library' ? '2' : '1';
				const res = await slideshowList(type);
				if (res.code == 200) {
					this.list3 = [];
					res.rows.forEach((item) => {
						if (item.filePath != null) {
							item.filePath = config.baseUrl + item.filePath;
							this.list3.push(item.filePath)
						}
					});
				}
			},

			handleSearch() {
				if (this.currentTab === 'library') {
					this.handleLibrarySearch(this.keyword);
				} else {
					this.handleCulturalSearch(this.keyword);
				}
			},

			handleLibrarySearch(keyword) {
				uni.navigateTo({
					url: `/book/book-list/index?keyword=${keyword}&type=0`
				});
			},

			handleCulturalSearch(keyword) {
				// 文创商品的搜索逻辑
				console.log('搜索文创商品:', keyword);
				// 这里可以添加文创商品的搜索跳转逻辑
			},

			handelChangeBookList(classifyIds) {
				if (this.currentTab === 'library') {
					uni.navigateTo({
						url: `/book/book-list/index?classifyIds=${classifyIds}&type=4`
					});
				} else {
					// 文创馆的分类跳转逻辑
					console.log('文创分类:', classifyIds);
				}
			},

			handleCuratorRecommended() {
				if (this.currentTab === 'library') {
					uni.navigateTo({
						url: `/book/book-list/index?type=2`
					});
				} else {
					// 文创馆的馆长推荐逻辑
					console.log('文创馆长推荐');
				}
			}
		}
	};
</script>

<style lang="scss">
	.container-wx {
		position: relative;
		height: 100vh;
		width: 100%;
		background-color: #f6f6f6;
		display: flex;
		flex-direction: column;
		align-items: center;

		.content {
			width: 95%;
			display: flex;
			justify-content: center;
			flex-direction: column;
			background-color: #FBFBFB;

			// 切换按钮样式
			.switch-tabs {
				display: flex;
				background: #ffffff;
				border-radius: 25rpx;
				padding: 8rpx;
				margin-top: 20rpx;
				box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);

				.tab-item {
					flex: 1;
					text-align: center;
					padding: 20rpx 0;
					font-size: 28rpx;
					color: #666;
					border-radius: 20rpx;
					transition: all 0.3s ease;

					&.active {
						background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
						color: #ffffff;
						font-weight: bold;
						box-shadow: 0 4rpx 12rpx rgba(79, 172, 254, 0.3);
					}
				}
			}

			.module {
				display: flex;
				width: 100%;
				height: 70px;
				margin-top: 10px;
				justify-content: center;
				background-color: #ffffff;

				.module-item {
					flex-direction: column;
					display: flex;
					border-radius: 17px;
					width: 50px;
					height: 80px;
					justify-content: center;
					align-items: center;
				}
			}
		}
	}
</style>